<template>
  <!-- 书籍详情页评论区和推荐区 -->
  <div class="bookDetailsContent">
    <div class="container">
      <div class="row">
        <div class="col-12 col-md-8">

          <div class="d-flex align-items-center justify-content-between flex-wrap border-bottom">
            <!-- 评论指示 -->
            <div class="d-flex align-items-center">
              <p class="lead mr-2">评论区</p>
              <p class="lead">{{this.$store.state.userComment.length}}条</p>
            </div>
            <div>
              <button class="btn btn-secondary btn-sm" type="button" data-toggle="collapse" data-target="#comment" :disabled='setElementState'>
                {{text}}
              </button>
            </div>
          </div>
          <!-- 评论 -->
          <div class="collapse border-bottom" id="comment">
            <form @submit.prevent="setComment($event)">
                <div class="form-group">
                  <label for="textarea"></label>
                  <textarea class="form-control" id="textarea" rows="5" :maxlength="textLength" name='udesc' @input="getCommentLength($event)"></textarea>
                </div>
                <div class="d-flex justify-content-between">
                  <span>{{surplusLength}}/{{textLength}}</span>
                  <button type="submit" class="btn btn-primary mb-1" :disabled='pushFlag' >Submit</button>
                </div>
            </form>
          </div>
          <!-- 未评论的占位符 -->
          <div class="border mb-4 d-flex justify-content-center align-items-center zw" v-if="!this.$store.state.userComment.length">
            还没有评论，快来讨论吧~
          </div>
          <!-- 评论区 -->
          <div class="row mt-4 p-1 user" v-for="(v, k) in this.$store.state.userComment">
            <div class="col-12 d-flex pt-1 bg-white shadow-sm userImg">
              <div class="mr-2">
                <img :src="userImg(v)" alt="" class="rounded-circle" style="width: 70px;">
              </div>
              <div class="">
                <div class="d-flex justify-content-between align-items-center">
                  <h1 class="lead" :class="{'rootColor': theColor(v)}">{{v.username}}
                    <span class="badge badge-secondary bg-danger" v-show="theColor(v)">管理员</span>
                  </h1>
                </div>
                <p class="userContent">{{v.content}} </p>
                <p>{{v.nowdate}}</p>
              </div>
            </div>
          </div> 

        </div>
        <!-- 右侧书籍推荐 -->
        <div class="col-12 col-md-4">
          <h5 class="bg-white mt-2 text-secondary">推荐书籍：</h5>
          <div class="row d-flex justify-content-between">
            <div class="card mb-2 col-12 shadow border-0" v-for="(v, k) in recommendBooks">
              <div class="card-body">
                <h5 class="card-title" style="cursor: pointer; color: #7bbfea;" @click="getInto(v.id)">{{v.name}}</h5>
                <p class="card-text"><small class="text-muted">{{v.author}}</small></p>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'BookDetailsContent',
    data () {
      return {
        flag: 'true',
        text: '请登录后评论',
        pushFlag: '',
        textLength: 200,
        surplusLength: 200,
        recommendBooks: JSON.parse(localStorage.getItem('mobiBooks'))
      }
    },
    computed: {
      setElementState() {
        // 判断用户是否登录来进行评论
        if(localStorage.getItem('userInformation')) {
          this.flag = false;
          this.text = '评论';
        }
        return this.flag;
      },
      // 返回拼接后的图片地址
      userImg() {
        return v => {
          let str = 'https://www.zengpengxi.com/userImg/';
          let img = v.img;
          
          return str + img;
        }
      },
      theColor(v) {
        return v => {
          if (v.root == 'true') {
            return true;
          } else {
            return false;
          }
        }
      }
    },
    methods: {
      setComment(event) {
        // 发送用户在当前书籍的评论
        let userObj = {
          id: JSON.parse(localStorage.getItem('userInformation')).id,
          comment: event.target[0].value,
          bookId: Number(localStorage.getItem('booksId'))
        }
        // 向后台发送用户评论
        this.$store.dispatch('asynSetUserComment', userObj);
      },
      getCommentLength(event) {
        // 判断用户在输入框的剩余输入字符数量
        this.surplusLength = this.textLength - event.target.value.length;
        if (this.surplusLength === 200) {
          this.pushFlag = true;
        } else {
          this.pushFlag = false;
        }
      },
      getInto(index) {
        localStorage.setItem('booksId', index);
        window.location.reload();
        scrollTo(0,0);
      }
    },
    mounted() {
      // 在当前生命周期获取当前本地书籍Id的对应评论
      this.$store.dispatch('asynGetUserComment');
      scrollTo(0,0);
    }
  }

</script>

<style scoped>
  .user img {
    width: 100%;
  }

  .userImg {
      overflow: hidden;
    }

  .userContent {
    max-height: 100px;
    text-indent: 2em;
    overflow: auto;
  }

  .bookBoxs {
    height:180px;
  }

  .zw {
    width: 80%; 
    height: 100px; 
    margin: 0 auto; 
    margin-top: 30px
  }

  .rootColor {
    color: #cfb53b;
  }

  @media (max-width: 575px) {

  }

  @media (min-width: 576px) and (max-width: 767px) {
    .userImg {
      max-height: 30vh;
      overflow: hidden;
    }
  }

  @media (min-width: 768px) and (max-width: 799) {
    .userImg {
      max-height: 15vh;
      overflow: hidden;
    }
  }

  @media (min-width: 800px) and (max-width: 1199px) {
    .userImg {
      max-height: 30vh;
      overflow: hidden;
    }
  }

  @media (min-width: 1200px) {
    
  }
</style>